<template>
  <div class="photo-container">
    <template v-if="elWidth">
      <div class="photo-wrap" :style="styles.wrap">
        <img
          :src="path.url"
          v-for="path in imgList"
          :key="path.url"
          :style="styles.image"
          @click="onImageClick(path.link)"
        />
      </div>
      <div class="points-wrap" v-if="imgList.length > 1">
        <span :class="{'active': index === i}" v-for="(path, i) in imgList" :key="i" @click="handlePageSkip(i)" />
      </div>
      <i v-if="btn && imgList.length > 1" class="skip-icon el-icon-caret-left" @click="handlePageSkip('prev')" />
      <i v-if="btn && imgList.length > 1" class="skip-icon el-icon-caret-right" @click="handlePageSkip('next')" />
    </template>
  </div>
</template>

<script>

// import { getNoticeList, createNotice, deleteNotice } from '../../api';

export default {
  name: 'Carousel',
  components: {},
  props: {
    imgList: {
      type: Array,
      default: () => [],
    },
    height: {
      type: Number,
      default: 200,
    },
    width: {
      type: Number,
      default: 690,
    },
    btn: {
      type: Boolean,
      default: true,
    },
    duration: {
      type: Number,
      default: 4
    }
  },
  data() {
    return {
      index: 0,
      interval: null,
      elWidth: 0
    };
  },
  computed: {
    styles () {
      return {
        wrap: {
          width: `${this.elWidth * this.imgList.length}px`,
          height: `${this.elWidth / 8}px`,
          transform: `translateX(-${this.elWidth * this.index}px)`
        },
        image: {
          width: `${this.elWidth}px`
        }
      };
    }
  },
  methods: {
    handlePageSkip (page) {
      if (typeof page === 'number') {
        this.index = page;
      } else {
        this.skipPage(page === 'prev' ? -1 : 1);
      }
      this.setIntervalTask();
    },
    skipPage (count) {
      this.index += count;
      if (this.index < 0) this.index = this.imgList.length - 1;
      if (this.index >= this.imgList.length) this.index = 0;
    },
    setIntervalTask () {
      if (this.interval) clearInterval(this.interval);
      this.interval = setInterval(() => {
        this.skipPage(1);
      }, 1000 * this.duration);
    },
    getElWidth () {
      this.$nextTick(() => {
        this.elWidth = this.$el.clientWidth;        
      });
    },
    onImageClick(link) {
      if (link) window.open(link);
    }
  },
  watch: {},
  mounted() {
    this.getElWidth(); 
    this.setIntervalTask();
    window.addEventListener('resize', this.getElWidth);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.getElWidth);
    if (this.interval) clearInterval(this.interval);
  },
}
</script>

<style lang="scss" scoped>
.photo-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  cursor: pointer;
  
  .photo-wrap {
    display: inline-block;
    white-space: nowrap;
    transition: transform 1s;

    img {
      vertical-align: top;
      display: inline-block;
      height: 100%;
    }
  }

  .points-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 20px;
    line-height: 20px;
    width: 100%;
    text-align: center;

    span {
      display: inline-block;
      width: 20px;
      height: 4px;
      margin: 0 5px;
      border-radius: 1px;
      background-color: #fff;
      opacity: 0.3;
      cursor: pointer;
      transition: all 1s;
    }

    span.active {
      width: 32px;
      background-color: #009a61;
      opacity: 1;
    }
  }

  .skip-icon {
    position: absolute;
    top: 210px;
    color: #000;
    opacity: 0.3;
    font-size: 40px;
    font-weight: bold;
    display: none;
    cursor: pointer;
  }

  &:hover .skip-icon {
    display: block;
  }

  .el-icon-caret-left {
    left: 10px;
  }

  .el-icon-caret-right {
    right: 10px;
  }
}
 
</style>
